<template>
  <div>
    <!--条件查询-->
    <el-form ref="form" :model="pojo" label-width="80px">
      <el-form-item label="汽车名">
        <el-input v-model="pojo.name"></el-input>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select v-model="pojo.tid" placeholder="请选择" clearable>
          <el-option v-for="t in typess" :label="t.name" :value="t.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="出厂时间">
        <el-col :span="11">
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="pojo.start"
                          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="pojo.end"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage">查询</el-button>
        <el-button type="primary" @click="toAdd">添加</el-button>
        <el-button type="primary" @click="deleteIdArr">选中删除</el-button>
        <el-button type="primary" @click="exportExcel">导出</el-button>
        <el-upload action="http://localhost:8081/car/uploadExcel" name="excelFile" :show-file-list="false"
                   :on-success="handleSuccess"
                   :before-upload="beforeUpload">
          <el-button type="primary">上传文件</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <!--数据展示table表格-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>

      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>

      <el-table-column
          prop="name"
          label="车名">
      </el-table-column>

      <el-table-column
          prop="time"
          label="出厂时间">
        <template slot-scope="scope">{{ scope.row.time }}</template>
      </el-table-column>

      <el-table-column
          prop="hobby"
          label="特征">
      </el-table-column>

      <el-table-column
          prop="status"
          label="是否上架">
        <template slot-scope="scope">{{ scope.row.sex == 0 ? "是" : "否" }}</template>
      </el-table-column>

      <el-table-column
          prop="tname"
          label="品牌">
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="toUpdate(scope.row)">修改</el-button>
          <el-button type="text" @click="toDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
    </el-pagination>
    <!--添加弹框-->
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="员工">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="部门">
          <el-select v-model="form.tid" placeholder="请选择" clearable>
            <el-option v-for="t in typess" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="入职时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.time"
                            style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="爱好">
          <el-checkbox-group v-model="hobbyArr">
            <el-checkbox label="尊贵" name="hobby"></el-checkbox>
            <el-checkbox label="拉风" name="hobby"></el-checkbox>
            <el-checkbox label="时尚" name="hobby"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pojo: {},
      typess: [],
      tableData: [],
      idArr: [],
      pageNum: 1,
      pageSize: 2,
      pageTotal: 0,
      dialogVisible: false,
      form: {},
      hobbyArr: []
    }
  },
  methods: {
    findPage() {
      this.axios.post(`/car/findPage?pn=${this.pageNum}&ps=${this.pageSize}`, this.pojo).then(res => {
        this.tableData = res.data.records;
        this.pageTotal = res.data.total;
      })
    },
    findAll() {
      this.axios.post("/type/findAll").then(res => {
        this.typess = res.data;
      })
    },
    toAdd() {
      this.dialogVisible = true;
      this.form = {};
      this.hobbyArr = [];
    },
    handleSelectionChange(val) {
      for (let i = 0; i < val.length; i++) {
        this.idArr.push(val[i].id);
      }
    },
    deleteIdArr() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("/car/deleteIdArr", this.idArr).then(res => {
          if (res.data) {
            this.$message("删除成功");
            this.findPage();
          } else {
            this.$message("删除失败");
          }
        })
      })
    },
    //上传成功提示
    handleSuccess(response) {
      if (response) {
        this.$message("上传成功");
        this.findPage();
      } else {
        this.$message("上传失败");
      }
    },
    //上传之前进行文件格式校验
    beforeUpload(file) {
      const isXLS = file.type === 'application/vnd.ms-excel';
      if (isXLS) {
        return true;
      }
      const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (isXLSX) {
        return true;
      }
      this.$message.error('上传文件只能是xls或者xlsx格式!');
      return false;
    },
    exportExcel() {
      location.href = "http://localhost:8081/car/exportExcel";
    },
    toUpdate(row) {
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.hobbyArr = this.form.hobby.split(",");
    },
    toDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("/car/deleteById?id=" + id).then(res => {
          if (res.data) {
            this.$message("删除成功");
            this.findPage();
          } else {
            this.$message("删除失败");
          }
        })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
    onSubmit() {
      this.form.hobby = this.hobbyArr.join(",");
      this.axios.post("/car/upadd", this.form).then(res => {
        if (res.data) {
          this.dialogVisible = false;
          this.$message("添加/修改成功");
          this.findPage();
        } else {
          this.dialogVisible = false;
          this.$message("添加/修改失败");
        }
      })
    }
  },
  created() {
    this.findPage();
    this.findAll();
  },
  watch: {
    req: {
      deep: true,
      handler() {
        this.findPage();
      }
    }
  },
}
</script>

<style>

</style>